<template>
	<view class="page">
		<!-- 顶部信息 -->
		<view class="header">
			<view class="delivery-info">
				<text class="delivery-label">配送地址：</text>
				<text class="delivery-address">{{deliveryAddress}}</text>
			</view>
			<view class="address-btn" @click="showAddressSelect">
				<image class="location-icon" src="/static/icons/location-icon.svg" mode="aspectFit"></image>
				<text>选择地址</text>
			</view>
		</view>
		
		<!-- 主体内容区 -->
		<view class="content">
			<!-- 左侧分类列表 -->
			<view class="category-list">
				<view 
					class="category-item" 
					v-for="(item, index) in categories" 
					:key="index"
					:class="{ active: currentCategory === item.id }"
					@click="handleCategoryClick(item.id)"
				>
					<text>{{item.name}}</text>
				</view>
			</view>
			
			<!-- 右侧菜品列表 -->
			<scroll-view 
				scroll-y 
				class="dish-list"
				:scroll-into-view="currentViewId"
				:scroll-with-animation="true"
				@scroll="handleScroll"
				:scroll-top="scrollTop"
				@scrollend="handleScrollEnd"
			>
				<view 
					v-for="(category, index) in categories" 
					:key="index"
					:id="'category-' + category.id"
					class="category-section"
				>
					<view class="category-title">{{category.name}}</view>
					<view 
						class="dish-item" 
						v-for="dish in getDishesByCategory(category.id)" 
						:key="dish.id"
						@click="showDishDetail(dish)"
					>
						<image :src="dish.image" mode="aspectFill" class="dish-img"></image>
						<view class="dish-info">
							<text class="dish-name">{{dish.name}}</text>
							<text class="dish-desc">{{dish.description}}</text>
							<view class="dish-bottom">
								<text class="dish-price">¥{{dish.price}}</text>
								<view class="quantity-control">
									<text class="minus" @click.stop="decreaseQuantity(dish)" v-if="dish.quantity > 0">-</text>
									<text class="quantity" v-if="dish.quantity > 0">{{dish.quantity}}</text>
									<text class="plus" @click.stop="increaseQuantity(dish)">+</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 底部购物车 -->
		<view class="cart-bar" v-if="totalQuantity > 0">
			<view class="cart-info" @click="showCart">
				<view class="cart-icon">
					<image src="/static/icons/cart.svg" mode="aspectFit"></image>
					<text class="cart-badge">{{totalQuantity}}</text>
				</view>
				<view class="price-info">
					<text class="total-price">¥{{totalPrice}}</text>
					<text class="delivery-fee">另需配送费¥{{deliveryFee}}</text>
				</view>
			</view>
			<view class="checkout-btn" @click="goToCheckout">
				<text>去结算</text>
			</view>
		</view>

		<!-- 菜品详情弹窗 -->
		<uni-popup ref="dishPopup" type="bottom">
			<view class="dish-detail" v-if="currentDish">
				<view class="dish-detail-header">
					<image :src="currentDish.image" mode="aspectFill" class="detail-img"></image>
					<view class="detail-info">
						<text class="detail-name">{{currentDish.name}}</text>
						<text class="detail-price">¥{{currentDish.price}}</text>
					</view>
					<text class="close-btn" @click="closeDishDetail">×</text>
				</view>
				<view class="dish-detail-content">
					<text class="detail-desc">{{currentDish.description}}</text>
					<view class="detail-control">
						<view class="quantity-control">
							<text class="minus" @click="decreaseQuantity(currentDish)" v-if="currentDish.quantity > 0">-</text>
							<text class="quantity" v-if="currentDish.quantity > 0">{{currentDish.quantity}}</text>
							<text class="plus" @click="increaseQuantity(currentDish)">+</text>
						</view>
						<view class="add-btn" @click="addToCart(currentDish)">
							<text>加入购物车</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 购物车弹窗 -->
		<uni-popup ref="cartPopup" type="bottom">
			<view class="cart-popup">
				<view class="cart-popup-header">
					<text class="cart-title">购物车</text>
					<text class="clear-btn" @click="clearCart">清空购物车</text>
				</view>
				<scroll-view scroll-y class="cart-list">
					<view class="cart-item" v-for="dish in selectedDishes" :key="dish.id">
						<text class="dish-name">{{dish.name}}</text>
						<view class="dish-control">
							<text class="dish-price">¥{{dish.price}}</text>
							<view class="quantity-control">
								<text class="minus" @click="decreaseQuantity(dish)">-</text>
								<text class="quantity">{{dish.quantity}}</text>
								<text class="plus" @click="increaseQuantity(dish)">+</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="cart-popup-footer">
					<view class="total-info">
						<text class="total-label">合计：</text>
						<text class="total-price">¥{{totalPrice}}</text>
					</view>
					<view class="checkout-btn" @click="goToCheckout">
						<text>去结算</text>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 地址选择弹窗 -->
		<uni-popup ref="addressPopup" type="bottom">
			<view class="address-popup">
				<view class="address-popup-header">
					<text class="address-title">选择配送地址</text>
					<text class="close-btn" @click="closeAddressSelect">×</text>
				</view>
				<scroll-view scroll-y class="address-list">
					<view 
						class="address-item" 
						v-for="(address, index) in addresses" 
						:key="index"
						@click="selectAddress(address)"
					>
						<view class="address-info">
							<text class="address-name">{{address.name}}</text>
							<text class="address-phone">{{address.phone}}</text>
						</view>
						<text class="address-detail">{{address.detail}}</text>
					</view>
				</scroll-view>
				<view class="address-popup-footer">
					<view class="add-address-btn" @click="addNewAddress">
						<text>新增地址</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {ref, computed} from 'vue';
	import {onLoad, onShow} from "@dcloudio/uni-app";
	import request from "/common/api.js"
	
	// 配送地址
	const deliveryAddress = ref('请选择配送地址')
	
	// 分类数据
	const categories = ref([
		{id: 1, name: '锅底'},
		{id: 2, name: '肉类'},
		{id: 3, name: '海鲜'},
		{id: 4, name: '蔬菜'},
		{id: 5, name: '主食'},
		{id: 6, name: '饮品'}
	])
	
	// 当前选中的分类
	const currentCategory = ref(1)
	
	// 菜品数据
	const dishesList = ref([
		{
			id: 101,
			categoryId: 1,
			name: '麻辣锅底',
			description: '正宗川味麻辣，香辣过瘾',
			price: 68,
			image: '/static/icons/dishes/hotpot.svg',
			quantity: 0
		},
		{
			id: 102,
			categoryId: 1,
			name: '菌汤锅底',
			description: '多种菌菇熬制，营养美味',
			price: 58,
			image: '/static/icons/dishes/hotpot.svg',
			quantity: 0
		},
		{
			id: 103,
			categoryId: 1,
			name: '番茄锅底',
			description: '新鲜番茄，酸甜可口',
			price: 48,
			image: '/static/icons/dishes/hotpot.svg',
			quantity: 0
		},
		{
			id: 201,
			categoryId: 2,
			name: '雪花牛肉',
			description: '澳洲进口，鲜嫩多汁',
			price: 88,
			image: '/static/icons/dishes/meat.svg',
			quantity: 0
		},
		{
			id: 202,
			categoryId: 2,
			name: '毛肚',
			description: '新鲜毛肚，爽脆可口',
			price: 48,
			image: '/static/icons/dishes/meat.svg',
			quantity: 0
		},
		{
			id: 203,
			categoryId: 2,
			name: '羊肉卷',
			description: '内蒙古草原羊肉，鲜嫩不膻',
			price: 58,
			image: '/static/icons/dishes/meat.svg',
			quantity: 0
		},
		{
			id: 301,
			categoryId: 3,
			name: '基围虾',
			description: '新鲜活虾，肉质鲜美',
			price: 68,
			image: '/static/icons/dishes/meat.svg',
			quantity: 0
		},
		{
			id: 302,
			categoryId: 3,
			name: '扇贝',
			description: '大连扇贝，个大肉肥',
			price: 48,
			image: '/static/icons/dishes/meat.svg',
			quantity: 0
		},
		{
			id: 401,
			categoryId: 4,
			name: '生菜',
			description: '新鲜生菜，爽脆可口',
			price: 12,
			image: '/static/icons/dishes/meat.svg',
			quantity: 0
		},
		{
			id: 402,
			categoryId: 4,
			name: '金针菇',
			description: '新鲜金针菇，营养美味',
			price: 16,
			image: '/static/icons/dishes/meat.svg',
			quantity: 0
		},
		{
			id: 501,
			categoryId: 5,
			name: '手工面',
			description: '手工制作，劲道爽滑',
			price: 12,
			image: '/static/icons/dishes/meat.svg',
			quantity: 0
		},
		{
			id: 502,
			categoryId: 5,
			name: '米饭',
			description: '东北大米，香软可口',
			price: 3,
			image: '/static/icons/dishes/meat.svg',
			quantity: 0
		},
		{
			id: 601,
			categoryId: 6,
			name: '可乐',
			description: '冰镇可乐，清爽解暑',
			price: 6,
			image: '/static/icons/dishes/meat.svg',
			quantity: 0
		},
		{
			id: 602,
			categoryId: 6,
			name: '雪碧',
			description: '冰镇雪碧，清爽解暑',
			price: 6,
			image: '/static/icons/dishes/meat.svg',
			quantity: 0
		}
	])
	
	// 配送费
	const deliveryFee = ref(5)
	
	// 计算总数量
	const totalQuantity = computed(() => {
		return dishesList.value.reduce((total, dish) => total + dish.quantity, 0)
	})
	
	// 计算总价
	const totalPrice = computed(() => {
		return dishesList.value.reduce((total, dish) => total + dish.price * dish.quantity, 0).toFixed(2)
	})
	
	// 节流函数
	const throttle = (fn, delay = 200) => {
		let timer = null
		let lastTime = 0
		
		return function (...args) {
			const now = Date.now()
			
			if (now - lastTime >= delay) {
				fn.apply(this, args)
				lastTime = now
			} else if (!timer) {
				timer = setTimeout(() => {
					fn.apply(this, args)
					lastTime = Date.now()
					timer = null
				}, delay)
			}
		}
	}
	
	// 滚动相关变量
	const scrollTop = ref(0)
	const currentViewId = ref('')
	const isScrolling = ref(false)
	const scrollTimer = ref(null)
	
	// 处理分类点击
	const handleCategoryClick = (categoryId) => {
		if (currentCategory.value === categoryId) return
		
		// 设置滚动锁定
		isScrolling.value = true
		
		// 更新当前分类和视图ID
		currentCategory.value = categoryId
		currentViewId.value = `category-${categoryId}`
		
		// 清除之前的定时器
		if (scrollTimer.value) {
			clearTimeout(scrollTimer.value)
		}
		
		// 设置新的定时器，滚动结束后解除锁定
		scrollTimer.value = setTimeout(() => {
			isScrolling.value = false
		}, 500)
	}
	
	// 处理滚动事件
	const handleScroll = throttle((e) => {
		if (isScrolling.value) return
		
		const scrollTop = e.detail.scrollTop
		
		// 获取所有分类section的位置信息
		const query = uni.createSelectorQuery()
		query.selectAll('.category-section').boundingClientRect()
		query.exec((res) => {
			if (!res[0]) return
			
			// 找到当前滚动位置对应的分类
			const sections = res[0]
			let currentSection = null
			
			// 从下往上找第一个在可视区域内的section
			for (let i = sections.length - 1; i >= 0; i--) {
				const section = sections[i]
				// 考虑顶部header的高度(100rpx)和分类标题的高度(约80rpx)
				if (scrollTop >= section.top - 180) {
					currentSection = section
					break
				}
			}
			
			// 如果找到对应的section，且分类ID不同，则更新当前分类
			if (currentSection) {
				const categoryId = Number(currentSection.id.split('-')[1])
				if (currentCategory.value !== categoryId) {
					currentCategory.value = categoryId
				}
			}
		})
	}, 100)
	
	// 处理滚动结束事件
	const handleScrollEnd = () => {
		isScrolling.value = false
	}
	
	// 当前选中的菜品
	const currentDish = ref(null)
	const dishPopup = ref(null)
	const cartPopup = ref(null)
	const addressPopup = ref(null)
	
	// 显示菜品详情
	const showDishDetail = (dish) => {
		currentDish.value = dish
		dishPopup.value.open()
	}
	
	// 关闭菜品详情
	const closeDishDetail = () => {
		dishPopup.value.close()
	}
	
	// 显示购物车
	const showCart = () => {
		cartPopup.value.open()
	}
	
	// 清空购物车
	const clearCart = () => {
		uni.showModal({
			title: '提示',
			content: '确定要清空购物车吗？',
			success: (res) => {
				if (res.confirm) {
					dishesList.value.forEach(dish => {
						dish.quantity = 0
					})
					dishesList.value = [...dishesList.value]
					cartPopup.value.close()
				}
			}
		})
	}
	
	// 增加数量
	const increaseQuantity = (dish) => {
		dish.quantity++
		dishesList.value = [...dishesList.value]
	}
	
	// 减少数量
	const decreaseQuantity = (dish) => {
		if (dish.quantity > 0) {
			dish.quantity--
			dishesList.value = [...dishesList.value]
		}
	}
	
	// 获取分类下的菜品
	const getDishesByCategory = (categoryId) => {
		return dishesList.value.filter(dish => dish.categoryId === categoryId)
	}
	
	// 已选中的菜品
	const selectedDishes = computed(() => {
		return dishesList.value.filter(dish => dish.quantity > 0)
	})
	
	// 加入购物车
	const addToCart = (dish) => {
		increaseQuantity(dish)
		closeDishDetail()
	}
	
	// 显示地址选择
	const showAddressSelect = () => {
		addressPopup.value.open()
	}
	
	// 关闭地址选择
	const closeAddressSelect = () => {
		addressPopup.value.close()
	}
	
	// 模拟地址数据
	const addresses = ref([
		{
			name: '张三',
			phone: '13800138000',
			detail: '重庆市南岸区南山路8号'
		},
		{
			name: '李四',
			phone: '13900139000',
			detail: '重庆市南岸区南山路10号'
		}
	])
	
	// 选择地址
	const selectAddress = (address) => {
		deliveryAddress.value = address.detail
		closeAddressSelect()
	}
	
	// 新增地址
	const addNewAddress = () => {
		uni.navigateTo({
			url: '/pages/address/add'
		})
	}
	
	// 去结算
	const goToCheckout = () => {
		if (deliveryAddress.value === '请选择配送地址') {
			uni.showToast({
				title: '请选择配送地址',
				icon: 'none'
			})
			return
		}
		
		// 获取已选中的菜品
		const selectedDishes = dishesList.value.filter(dish => dish.quantity > 0).map(dish => ({
			id: dish.id,
			name: dish.name,
			price: dish.price,
			quantity: dish.quantity,
			image: dish.image
		}))
		
		if (selectedDishes.length === 0) {
			uni.showToast({
				title: '请选择菜品',
				icon: 'none'
			})
			return
		}
		
		// 关闭购物车弹窗
		if (cartPopup.value) {
			cartPopup.value.close()
		}
		
		// 跳转到确认订单页面
		uni.navigateTo({
			url: `/pages/order/confirm?type=takeout&address=${encodeURIComponent(deliveryAddress.value)}&items=${encodeURIComponent(JSON.stringify(selectedDishes))}&totalAmount=${totalPrice.value}&deliveryFee=${deliveryFee.value}`
		})
	}

	onLoad(() => {
		request.loadPostData("/appMenu/list", {}, dishesList)
	})
</script>

<style>
	.page {
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F5;
		display: flex;
		flex-direction: column;
		position: relative;
	}
	
	.header {
		background-color: #FFFFFF;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}
	
	.delivery-info {
		flex: 1;
		display: flex;
		align-items: center;
	}
	
	.delivery-label {
		font-size: 28rpx;
		color: #666;
	}
	
	.delivery-address {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}
	
	.address-btn {
		display: flex;
		align-items: center;
		background-color: #D02B29;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
	}
	
	.location-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}
	
	.address-btn text {
		color: #FFFFFF;
		font-size: 28rpx;
	}
	
	.content {
		flex: 1;
		display: flex;
		margin-top: 100rpx; /* header的高度 */
		height: calc(100vh - 100rpx - 100rpx); /* 减去header和cart-bar的高度 */
		position: relative;
	}
	
	.category-list {
		width: 160rpx;
		background-color: #F5F5F5;
		height: 100%;
		position: fixed;
		left: 0;
		top: 100rpx;
		z-index: 1;
	}
	
	.category-item {
		padding: 30rpx 20rpx;
		text-align: center;
		position: relative;
		background-color: #F5F5F5;
	}
	
	.category-item.active {
		background-color: #FFFFFF;
	}
	
	.category-item.active::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 32rpx;
		background-color: #D02B29;
	}
	
	.category-item text {
		font-size: 28rpx;
		color: #666;
	}
	
	.category-item.active text {
		color: #D02B29;
		font-weight: bold;
	}
	
	.dish-list {
		flex: 1;
		background-color: #FFFFFF;
		height: 100%;
		padding: 20rpx;
		margin-left: 160rpx;
	}
	
	.category-section {
		margin-bottom: 30rpx;
		scroll-margin-top: 180rpx;
		position: relative;
	}
	
	.category-title {
		position: sticky;
		top: 0;
		z-index: 1;
		background-color: #FFFFFF;
		padding: 20rpx 0;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}
	
	.dish-item {
		display: flex;
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	
	.dish-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	
	.dish-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.dish-name {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}
	
	.dish-desc {
		font-size: 24rpx;
		color: #999;
		margin: 10rpx 0;
	}
	
	.dish-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.dish-price {
		font-size: 32rpx;
		color: #D02B29;
		font-weight: bold;
	}
	
	.quantity-control {
		display: flex;
		align-items: center;
	}
	
	.minus, .plus {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: #F5F5F5;
		border-radius: 50%;
		font-size: 28rpx;
	}
	
	.quantity {
		margin: 0 20rpx;
		font-size: 28rpx;
		color: #333;
	}
	
	.cart-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		z-index: 100;
	}
	
	.cart-info {
		flex: 1;
		display: flex;
		align-items: center;
	}
	
	.cart-icon {
		position: relative;
		margin-right: 20rpx;
	}
	
	.cart-icon image {
		width: 60rpx;
		height: 60rpx;
	}
	
	.cart-badge {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		background-color: #D02B29;
		color: #FFFFFF;
		font-size: 20rpx;
		padding: 0 10rpx;
		border-radius: 20rpx;
		min-width: 30rpx;
		text-align: center;
	}
	
	.price-info {
		display: flex;
		flex-direction: column;
	}
	
	.total-price {
		font-size: 32rpx;
		color: #D02B29;
		font-weight: bold;
	}
	
	.delivery-fee {
		font-size: 24rpx;
		color: #999;
	}
	
	.checkout-btn {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #D02B29;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 40rpx;
	}

	/* 菜品详情弹窗样式 */
	.dish-detail {
		background-color: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx;
	}

	.dish-detail-header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		position: relative;
	}

	.detail-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.detail-info {
		flex: 1;
	}

	.detail-name {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.detail-price {
		font-size: 36rpx;
		color: #D02B29;
		font-weight: bold;
	}

	.close-btn {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 40rpx;
		color: #999;
		padding: 10rpx;
	}

	.dish-detail-content {
		padding: 20rpx 0;
	}

	.detail-desc {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
		margin-bottom: 30rpx;
	}

	.detail-control {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.add-btn {
		background-color: #D02B29;
		color: #FFFFFF;
		padding: 20rpx 40rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	/* 购物车弹窗样式 */
	.cart-popup {
		background-color: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx;
		max-height: 80vh;
		display: flex;
		flex-direction: column;
	}

	.cart-popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.cart-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.clear-btn {
		font-size: 28rpx;
		color: #999;
	}

	.cart-list {
		flex: 1;
		max-height: 50vh;
	}

	.cart-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.cart-popup-footer {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #EEEEEE;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.total-info {
		display: flex;
		align-items: center;
	}

	.total-label {
		font-size: 28rpx;
		color: #666;
	}

	/* 地址选择弹窗样式 */
	.address-popup {
		background-color: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx;
		max-height: 80vh;
		display: flex;
		flex-direction: column;
	}

	.address-popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.address-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.address-list {
		flex: 1;
		max-height: 50vh;
	}

	.address-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.address-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.address-name {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.address-phone {
		font-size: 28rpx;
		color: #666;
	}

	.address-detail {
		font-size: 28rpx;
		color: #666;
	}

	.address-popup-footer {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #EEEEEE;
	}

	.add-address-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #FF6B6B, #D02B29);
		border-radius: 44rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-address-btn:active {
		opacity: 0.9;
	}
</style>
